<template>
  <div class="class-list"
        v-loading="loading.status"
        :element-loading-text="loading.txt"
  >

    <div class="crumbs-link my-reservation-add-link">
      <em @click="goback()">评级列表</em>
      <strong>
        <i>></i>评课量表</strong>
    </div>

    <div class="excellent-search clear">
      <div class="my-reservation-operation-l fl">

        <el-select v-model="study_section_id" placeholder="请选择">
          <el-option v-for="item in orgLevel2" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>

        <el-select v-model="subject_id" placeholder="请选择">
          <el-option v-for="item in orgSubject" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>

        <el-select v-model="teaching_type" placeholder="选择课型">
          <el-option label="新授课" :value="1"></el-option>
          <el-option label="复习课" :value="2"></el-option>
          <el-option label="评讲课" :value="3"></el-option>
          <el-option label="主题活动课" :value="4"></el-option>
        </el-select>
        <!-- <el-input placeholder="评课量表名称" suffix-icon="el-icon-search" v-model="search_val">
        </el-input> -->
        <el-input v-model="keyword" placeholder="评课量表名称" suffix-icon="el-icon-search" @keyup.enter.native="searchFunc"></el-input>

        <el-button type="primary" @click="searchFunc">搜索</el-button>
        <el-button type="primary" @click="reset">重置</el-button>

      </div>
      <router-link to="/course2/class-list-add" class="fr">新增评级量表</router-link>
    </div>

    <ul class="class-list-cont clear">

      <li class="class-list-txt fl" v-for="(item, index) in listData" :key="index">
        <p @click="ratingList(item.id)">{{item.name}}</p>
        <div class="class-list-tag">
          <span>{{item.study_section_name}}</span>
          <span>{{item.grade_name}}</span>
          <span>{{item.subject_name}}</span>
          <span v-text="addTeachingType(item.teaching_type)"></span>
        </div>
        <div class="class-list-time">
          <span>{{item.create_time}} </span>
        </div>
        <div class="class-list-operation">
          <router-link :to="{path: '/course2/class-list-edit', query: {id: item.id}}">编辑</router-link>
          <el-button type="text" size="small" @click="removeList(item.id)">删除</el-button>
        </div>
      </li>

    </ul>
    <el-row class="class-list-emptyData" v-if="listData.length===0">
      还没发现任何相关的内容哦~
    </el-row>
    <el-pagination v-show="total_number > 10" background class="pageing" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParam.page_index" :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="listParam.page_size" layout="total, sizes, prev, pager, next, jumper" :total="total_number">
    </el-pagination>

    <el-dialog title="查看评级量表" :visible.sync="ratingVisible" width="800px" custom-class="visible" :close-on-click-modal="false">
      <div class="ratingReview">

        <div class="ratingReview-h clear">
          <div class="fl">
            <span>撰写人：{{scale_data.user_name}}</span>
          </div>

          <div class="fr">
            <span>总分：
              <i>{{scale_data.total_score}}</i>
            </span>
          </div>
        </div>

        <el-form label-width="0" class="ratingReview-dome">
          <div class="ratingReview-b">
            <table>
              <thead>
                <tr>
                  <th style="width:20%">项目</th>
                  <th style="width:40%">评价内容</th>
                  <th style="width:20%">分数</th>
                </tr>
              </thead>

              <tbody>
                <tr v-for="(item, index) in scale_data.info_data" :key="index">
                  <td>{{item.content}}</td>
                  <td>
                    <div v-for="(name, nameInx) in item.children" :key="nameInx" class="itc-td">
                      {{name.content}}
                    </div>
                  </td>
                  <td>
                    <div v-for="(score, scoreInx) in item.children" :key="scoreInx" class="itc-td">
                      {{score.score}}
                    </div>
                  </td>
                </tr>
              </tbody>

            </table>

          </div>
        </el-form>

      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
    data() {
        return {
            loading:{
              status:false,
              txt:'获取数据...',
            },
            listData: [],
            scale_data: {},
            page_index: 1,
            page_size: 10,
            total_number: 10,
            ratingVisible: false,
            listParam: {
                study_section_id: null,
                subject_id: null,
                grade_id: null,
                teaching_type: null,
                keyword: null,
                page_index: 1,
                page_size: 10
            },
            grade_id: null,
            study_section_id: null,
            subject_id: null,
            teaching_type: null,
            keyword: "",
            orgLevel2Param: {
                //获取学段参数
                level: 2,
                pid: null,
                direction: "balance"
            },

            subjectParam: {
                //获取科目,版本，参数
                type: 2,
                org_id: null,
                status: 1
            },
            orgLevel2: [{ id: null, name: "全部学段" }],
            orgSubject: [{ id: null, name: "全部科目" }]
        };
    },
    created() {
        this.getOrgLevel2();
        this.getSubject();
        this.getList();
    },
    methods: {
        searchFunc() {
            this.listParam.study_section_id = this.study_section_id;
            this.listParam.teaching_type = this.teaching_type;
            this.listParam.subject_id = this.subject_id;
            this.listParam.keyword = this.keyword;
            this.listParam.page_index = 1;
            this.listParam.page_size = 10;
            this.getList();
        },
        reset() {
            this.study_section_id = null;
            this.teaching_type = null;
            this.subject_id = null;
            this.keyword = "";
            this.orgLevel2Param = {
                //获取学段参数
                level: 2,
                pid: null,
                direction: "balance"
            };
            this.subjectParam = {
                //获取科目,版本，参数
                type: 2,
                org_id: null,
                status: 1
            };
            this.listParam = {
                study_section_id: null,
                teaching_type: null,
                subject_id: null,
                keyword: "",
                page_index: 1,
                page_size: 10
            };
            this.getList();
        },
        //获取学段
        getOrgLevel2() {
            let success = data => {
                this.orgLevel2 = data.data;
                this.orgLevel2.unshift({ id: null, name: "全部学段" });
            };
            this.$ajax.get("api/org/org", {
                params: this.orgLevel2Param,
                func: { success: success }
            });
        },

        //获取科目
        getSubject() {
            let success = data => {
                this.orgSubject = data.data;
                this.orgSubject.unshift({ id: null, name: "全部科目" });
            };
            this.$ajax.get("api/cate/subject", {
                params: this.subjectParam,
                func: { success: success }
            });
        },
        goback() {
            this.$router.back(-1);
        },

        //显示单个的评论评价
        ratingList(val) {
            this.ratingVisible = true;
            let success = data => {
                this.scale_data = data.data;
            };
            let fail = data => {
                this.$message.error(data.msg);
            };
            this.$ajax.get("api/teachingschedule/schedule_scale", {
                params: { schedule_id: val },
                func: { success: success, fail: fail }
            });
        },
        //课型id转成对应名字
        addTeachingType(teaching_type) {
            switch (teaching_type) {
                case 1:
                    return "新授课";
                case 2:
                    return "复习课";
                case 3:
                    return "评讲课";
                case 4:
                    return "主题活动课";
            }
        },
        //获取列表
        getList() {
            this.loading.status = true;
            let success = res => {
                this.loading.status = false;
                let data = res.data;
                this.listData = data.data;
                this.total_number = data.data_sum;
                this.page_index = parseInt(data.page_index);
                this.loading = false;
                this.listData.length === 0
                    ? (this.placeholder = true)
                    : (this.placeholder = false);
            };

            let fail = data =>{
                 this.loading.status = false;
                 this.$message.error( data.msg )
            }
            this.$ajax.get("api/teachingschedule/schedule_scale_list", {
                params: this.listParam,
                func: { success: success ,fail:fail }
            });
        },
        //删除
        removeList(res_id) {
            this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                // type: "warning",
                customClass: "confirm-them"
            })
                .then(res => {
                    let success = res => {
                        this.$message.success(res.msg);
                        this.page_index = 1;
                        this.page_size = 10;
                        // this.total_number = 10;
                        this.searchFunc();
                    };
                    this.$ajax({
                        url: "api/teachingschedule/schedule_scale",
                        method: "delete",
                        params: {
                            schedule_id: res_id
                        },
                        func: {
                            success: success
                        }
                    });
                })
                .catch(() => {});
        },

        //分页
        handleSizeChange(val) {
            this.listParam.page_index = 1;
            this.listParam.page_size = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.listParam.page_index = val;
            this.getList();
        }
    }
};
</script>
<style lang="scss">
    .class-list-emptyData {
        height: 207px;
        line-height: 207px;
        text-align: center;
        font-size: 14px;
        color: #909399;
        background-color: #fff;
    }
    .ratingReview-dome {
        td {
            .itc-td {
                border-bottom: 1px solid rgba(224, 224, 224, 0.6);
                word-break: break-all;
                word-wrap: break-word;
            }
           .itc-td:nth-last-child(1) {
                border-bottom: 1px solid transparent;
            }
        }
    }
</style>

